<template>
  <el-dialog v-model="showFieldPopup" title="添加字段" width="500" :before-close="handleClose">
    <div class="add-box">
      <div class="add-box-item">
        <span>字段备注:</span>
        <el-input v-model="fieldValue.beiZhu" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="add-box-item">
        <span>字段中文名称:</span>
        <el-input v-model="fieldValue.notes" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="add-box-item">
        <span>字段英文名称:</span>
        <el-input v-model="fieldValue.notesEn" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="add-box-item">
        <span>字段别名:</span>
        <el-input v-model="fieldValue.fieldName" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="add-box-item">
        <span>字段类型:</span>
        <el-select v-model="fieldValue.fieldType" placeholder="请选择" size="large" style="width: 240px">
          <el-option v-for="(item,index) in fieldList" :key="item.index" :label="item.type" :value="item.config.type"/>
        </el-select>
      </div>
      <div class="add-box-item">
        <span>是否必填:</span>
        <el-radio-group v-model="fieldValue.isFlag">
          <el-radio value="0">是</el-radio>
          <el-radio value="1">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveInfo">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive,watch,onMounted } from "vue";
import {fieldList} from '../../utils/field'
import {ElLoading, ElMessage} from "element-plus";
import {_addBox, _addFields, _updateField} from "../../http/api.js";

const props = defineProps({
  fieldData:Object
})

const $emit = defineEmits(['showAddFieldEmit']);

const showFieldPopup = ref(true); // 弹框显示

//字段结构值
const fieldValue = ref({
  beiZhu: '', // 字段备注
  notes:'', // 字段中文名称
  notesEn:'', // 字段英文名称
  fieldName:'', // 字段别名
  fieldType:'', // 字段类型
  isFlag: '', // 字段是否必填
})

onMounted(() => {
  if(props.fieldData) {
    fieldValue.value.beiZhu = props.fieldData.beiZhu||'';
    fieldValue.value.notes = props.fieldData.notes||'';
    fieldValue.value.notesEn = props.fieldData.notesEn||'';
    fieldValue.value.fieldName = props.fieldData.fieldName||'';
    fieldValue.value.fieldType = props.fieldData.fieldType||'';
    fieldValue.value.isFlag = props.fieldData.isFlag||'';
  }
})

// 关闭弹框
const handleClose = () => {
  $emit('showAddFieldEmit',false)
}
// 保存字段修改
const saveInfo = () => {
  console.log(fieldValue.value);
  if(!fieldValue.value.beiZhu) return ElMessage({message: '请输入字段备注', type: 'warning' });
  if(!fieldValue.value.notes) return ElMessage({message: '请输入字段中文名称', type: 'warning' });
  if(!fieldValue.value.fieldName) return ElMessage({message: '请输入字段名称别名', type: 'warning' });
  if(!fieldValue.value.fieldType) return ElMessage({message: '请选择字段类型', type: 'warning' });
  if(!fieldValue.value.isFlag) return ElMessage({message: '请选择是否必填', type: 'warning' });
  if(props.fieldData&&props.fieldData.id) {
    updateField(fieldValue.value.fieldType)
  }else {
    addFields(fieldValue.value.fieldType);
  }
}

// 添加字段
const addFields = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'})
  let params = {
    beiZhu: fieldValue.value.beiZhu,
    fieldName: fieldValue.value.fieldName,
    fieldType: fieldValue.value.fieldType,
    notes: fieldValue.value.notes,
    notesEn: fieldValue.value.notesEn,
    isFlag: fieldValue.value.isFlag
  }
  _addFields(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          handleClose()
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}

// 更新字段
const updateField = (type) => {
  let params = {
    beiZhu: fieldValue.value.beiZhu,
    fieldName: fieldValue.value.fieldName,
    fieldType: fieldValue.value.fieldType,
    notes: fieldValue.value.notes,
    notesEn: fieldValue.value.notesEn,
    isFlag: fieldValue.value.isFlag,
    id: props.fieldData.id
  }
  _updateField(params)
      .then(res => {
        if(res.data.ok) {
          handleClose()
        }
      })
      .catch(err => {
        console.log(err);
      })
}
</script>



<style scoped lang="scss">
.add-box{
  .add-box-item{
    margin-bottom: 10px;
    span{
      display: inline-block;
      width: 90px;
    }
  }
}
</style>